<template>
  <view class="container">
    <!-- 登录页面（条件渲染） -->
    <view class="login-page" v-if="isLoginPageShow">
      <view class="back-btn" @click="togglePage">
        <image src="/static/icon-back.png" class="back-icon"></image>
      </view>
      <view class="title">登录</view>
      
      <image class="login-avatar" src="/static/fox-avatar.png"></image>
      
      <view class="form-item">
        <text class="label">用户：</text>
        <input v-model="username" placeholder="请输入用户名" class="input" />
      </view>
      <view class="form-item">
        <text class="label">密码：</text>
        <input v-model="password" type="password" placeholder="请输入密码" class="input" />
      </view>
      
      <view class="btn-group">
        <button class="reset-btn" @click="resetForm">重置</button>
        <button class="login-btn" @click="doLogin">登录</button>
      </view>
      
      <button class="register-btn" @click="goRegister">注册</button>
    </view>

    <!-- 我的页面（条件渲染） -->
    <view class="mine-page" v-else>
      <!-- 顶部用户栏 -->
      <view class="user-header">
        <image class="avatar" src="/static/fox-avatar.png.png" mode="widthFix"></image>
        <view class="user-info">
          <view class="greet">HI~欢迎回来</view>
          <view class="login-btn" v-if="!isLogin" @click="togglePage">登录</view>
          <view class="username" v-else>{{ username }}</view>
        </view>
      </view>

      <!-- 关注/话题 -->
      <view class="stats-bar">
        <view class="stat-item">关注3</view>
        <view class="split-line">|</view>
        <view class="stat-item">话题0</view>
      </view>

      <!-- 功能按钮 -->
      <view class="func-buttons">
        <view class="func-item" @click="goCollect">
          <image class="func-icon" src="/static/icon-star.png"></image>
          <text class="func-text">收藏</text>
        </view>
        <view class="func-item" @click="goHistory">
          <image class="func-icon" src="/static/icon-history.png"></image>
          <text class="func-text">历史</text>
        </view>
        <view class="func-item" @click="goSetting">
          <image class="func-icon" src="/static/icon-setting.png"></image>
          <text class="func-text">设置</text>
        </view>
      </view>

      <!-- 红包横幅 -->
      <view class="redpack-banner">
        <image class="banner-icon" src="/static/fox-avatar.png.png"></image>
        <text class="banner-text">瓜分30万现金红包</text>
        <text class="banner-btn">速抢 >></text>
      </view>

      <!-- 底部统计 -->
      <view class="count-text">已有385,893人在这里发布身边的新鲜事</view>

      <!-- 退出登录按钮（登录后显示） -->
      <button class="logout-btn" v-if="isLogin" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoginPageShow: false, // 是否显示登录页（默认显示我的页面）
      isLogin: false, // 是否登录
      username: "", // 用户名
      password: "" // 密码
    };
  },
  onShow() {
    // 页面加载时读取本地登录状态
    const loginInfo = uni.getStorageSync("loginInfo");
    if (loginInfo) {
      this.isLogin = true;
      this.username = loginInfo.username;
    }
  },
  methods: {
    // 切换登录页/我的页面
    togglePage() {
      this.isLoginPageShow = !this.isLoginPageShow;
    },
    // 重置登录表单
    resetForm() {
      this.username = "";
      this.password = "";
    },
    // 登录逻辑
    doLogin() {
      if (this.username && this.password) {
        // 存储登录状态到本地
        uni.setStorageSync("loginInfo", { username: this.username });
        this.isLogin = true;
        this.togglePage(); // 登录成功切换回我的页面
        uni.showToast({ title: "登录成功" });
      } else {
        uni.showToast({ title: "请输入账号密码", icon: "none" });
      }
    },
    // 退出登录
    logout() {
      uni.removeStorageSync("loginInfo");
      this.isLogin = false;
      this.username = "";
      uni.showToast({ title: "退出成功" });
    },
    // 注册（模拟，实际需扩展）
    goRegister() {
      uni.showToast({ title: "注册功能待开发", icon: "none" });
    },
    // 收藏页面（模拟跳转）
    goCollect() {
      this.checkLogin() && uni.showToast({ title: "跳转至收藏页", icon: "none" });
    },
    // 历史页面（模拟跳转）
    goHistory() {
      this.checkLogin() && uni.showToast({ title: "跳转至历史页", icon: "none" });
    },
    // 设置页面（模拟跳转）
    goSetting() {
      uni.showToast({ title: "跳转至设置页", icon: "none" });
    },
    // 登录校验
    checkLogin() {
      if (!this.isLogin) {
        uni.showToast({ title: "请先登录", icon: "none" });
        this.togglePage(); // 未登录切换到登录页
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #fff;
  min-height: 100vh;
}

/* 登录页面样式 */
.login-page {
  padding: 30rpx;
}
.back-btn {
  margin-bottom: 20rpx;
}
.back-icon {
  width: 30rpx;
  height: 30rpx;
}
.title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}
.login-avatar {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 30rpx;
  border-radius: 50%;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 28rpx;
}
.label {
  width: 100rpx;
}
.input {
  flex: 1;
  border-bottom: 1rpx solid #eee;
  padding: 10rpx 0;
}
.btn-group {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0;
}
.reset-btn {
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #eee;
  color: #666;
  border-radius: 10rpx;
}
.login-btn {
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #4080ff;
  color: #fff;
  border-radius: 10rpx;
}
.register-btn {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  color: #f00;
  background: transparent;
  border: 1rpx solid #f00;
  border-radius: 10rpx;
}

/* 我的页面样式 */
.mine-page {
  padding-bottom: 40rpx;
}
/* 顶部用户栏 */
.user-header {
  background: linear-gradient(to right, #f8a555, #f17a4a);
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #fff;
  padding: 5rpx;
}
.user-info {
  margin-left: 20rpx;
}
.greet {
  color: #fff;
  font-size: 28rpx;
}
.login-btn {
  background: #fff;
  color: #f17a4a;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-top: 5rpx;
  width: 100rpx;
  text-align: center;
}
.username {
  color: #fff;
  font-size: 28rpx;
  margin-top: 5rpx;
}
/* 关注/话题 */
.stats-bar {
  display: flex;
  justify-content: center;
  padding: 15rpx 0;
  font-size: 26rpx;
  color: #666;
  border-bottom: 1rpx solid #eee;
}
.split-line {
  margin: 0 20rpx;
  color: #ccc;
}
/* 功能按钮 */
.func-buttons {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.func-icon {
  width: 40rpx;
  height: 40rpx;
}
.func-text {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}
/* 红包横幅 */
.redpack-banner {
  background: #fde6b4;
  border: 1rpx solid #f9c05d;
  margin: 20rpx;
  padding: 15rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.banner-icon {
  width: 40rpx;
  height: 40rpx;
}
.banner-text {
  font-size: 26rpx;
  color: #d84a0b;
  flex: 1;
  margin-left: 10rpx;
}
.banner-btn {
  background: #f9c05d;
  color: #fff;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
/* 底部统计 */
.count-text {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin: 40rpx 0;
}
/* 退出登录按钮 */
.logout-btn {
  display: block;
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  margin: 0 auto;
  color: #f00;
  background: transparent;
  border: 1rpx solid #f00;
  border-radius: 10rpx;
}
</style>